<template>
	<section id='layout-user'>
		<header class="header">
			<div class="header__container">
				<div
					class="header__left"
					@click="$router.push('/index')"
				>
					<img class="logo" src="@/assets/logo.svg" alt="">
					<span class="logo-text">便利店 · 在线</span>
				</div>
				<div class="header__center">
					<div class="header__search">
						<el-input
							v-model="keyword"
							:class="searchClass"
							size="small"
							placeholder="搜索商品"
							@keyup.enter.native="search"
							@focus="isFocus = true"
							@blur="isFocus = false"
						>
							<i
								slot="suffix"
								class="el-input__icon el-icon-search"
								@click="search"
							></i>
						</el-input>
					</div>
				</div>
				<div class="header__right">
					<el-badge
						class="margin"
						:value="cartCount">
						<el-avatar
							class="user-icon icon-goods"
							size="medium"
							icon="el-icon-s-goods"
							@click.native="$router.push('/cart')"
						></el-avatar>
					</el-badge>
					<el-avatar
						class="user-icon margin icon-order"
						size="medium"
						icon="el-icon-s-order"
						@click.native="$router.push('/order')"
					></el-avatar>
					<el-dropdown
						trigger="click"
						@command="clickCommand"
					>
						<el-avatar
							class="user-icon icon-user"
							size="medium"
							:src="userInfo.avatar"
							icon="el-icon-user-solid"></el-avatar>
						<el-dropdown-menu slot="dropdown" class="admin-dropdown">
							<el-dropdown-item command="userInfo">
								<p class="username">{{userInfo.username}}</p>
								<p class="user-phone">{{userInfo.phone}}</p>
							</el-dropdown-item>
							<el-dropdown-item
								:divided="true"
								command="logout">退出登录
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</div>
			</div>
		</header>
		<div class="layout__main">
			<div class="view__main">
				<router-view/>
			</div>
		</div>
		<c-footer/>
	</section>
</template>

<script>
  /**
   *
   *
   *
   */
  import cFooter from '../../components/c-footer'
  import {mapState, mapGetters} from 'vuex'

  export default {
    name: "index",
    data() {
      return {
        keyword: '',
        isFocus: false
      }
    },
    computed: {
      ...mapState([
        'userInfo'
      ]),
      ...mapGetters([
        'cartCount'
      ]),
      searchClass() {
        return [this.isFocus ? 'is-active' : '']
      }
    },
    watch: {
      $route: {
        deep: true,
        immediate: true,
        handler({path, query}, oldRoute) {
          this.$store.dispatch('getCartList')
          if (oldRoute && path !== oldRoute.path) {
            this.keyword = ''
          }
        }
      }
    },
    methods: {
      search() {
        this.$bus.$emit('getGoodsList', this.keyword || '')
      },
      clickCommand(command) {
        switch (command) {
          case 'userInfo':
            this.$router.push('/user/info')
            break
          case 'logout':
            this.$axios.get('/user/logout')
            this.$router.replace('/login')
            this.$message({
              type: 'success',
              message: '已为您退出登录'
            })
            break
        }
      }
    },
    components: {
      cFooter
    }
  }
</script>

<style lang='less'>
	#layout-user {
		flex-grow: 1;
		width: 100%;
		min-height: 100%;
		background-color: #f0f2f5;
		display: flex;
		flex-direction: column;

		.header {
			width: 100%;
			height: 64px;
			box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
			background-color: #001529;
			position: fixed;
			top: 0;
			z-index: 10;
			padding: 0 20px;
			box-sizing: border-box;
		}

		.header__container {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			max-width: 1120px;
			margin: 0 auto;

			.header__left {
				flex-grow: 0;
				flex-shrink: 0;
				display: inline-flex;
				align-items: center;
				cursor: pointer;

				.logo {
					height: 36px;
				}

				.logo-text {
					color: #fff;
					margin-left: 20px;
					font-size: 20px;
					animation: fade-in;
				}
			}

			.header__center {
				flex-shrink: 1;
				flex-grow: 1;
			}

			.header__right {
				flex-shrink: 0;
				flex-grow: 0;
				display: inline-flex;
				align-items: center;
			}

			.header__search {
				text-align: right;
				margin-right: 20px;

				.el-input {
					width: 160px;
					transition: width .3s ease;

					&.is-active {
						width: 260px;

						.el-input__inner {
							background-color: #fff;
						}
					}
				}

				.el-input__inner {
					background-color: #eee;
				}
			}
		}

		.layout__main {
			flex-shrink: 0;
			flex-grow: 1;
			position: relative;
			z-index: 9;
			width: 100%;
			padding: 84px 20px 20px;
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
		}

		.view__main {
			flex-grow: 1;
			flex-shrink: 0;
			width: 100%;
			max-width: 1000px;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
		}

		.user-icon {
			cursor: pointer;
			background-color: transparent;

			[class*=el-icon] {
				font-size: 20px;
				color: #fff;
			}
		}

		.icon-goods {
			background-color: #E6A23C;
		}

		.icon-order {
			background-color: #409EFF;
		}

		.icon-user {
			background-color: #C0C4CC;
		}


		.margin {
			margin-right: 20px;
		}

		.page__header {
			padding: 0;
			background-color: #f0f2f5;
		}

		.page__main {
			border-radius: 6px;
			box-sizing: border-box;
		}
	}
</style>
